<template>
<!--	<div class="table-container">-->
<!--		<el-table-->
<!--			:data="data"-->
<!--			:border="setBorder"-->
<!--			v-bind="$attrs"-->
<!--			row-key="id"-->
<!--			stripe-->
<!--			style="width: 100%"-->
<!--			v-loading="config.loading"-->
<!--			@selection-change="onSelectionChange"-->
<!--		>-->
<!--			<el-table-column type="selection" :reserve-selection="true" width="30" v-if="config.isSelection" />-->
<!--			<el-table-column type="index" label="序号" width="60" v-if="config.isSerialNo" />-->
<!--			<el-table-column-->
<!--				v-for="(item, index) in setHeader"-->
<!--				:key="index"-->
<!--				show-overflow-tooltip-->
<!--				:prop="item.key"-->
<!--				:width="item.colWidth"-->
<!--				:label="item.title"-->
<!--			>-->
<!--				<template v-slot="scope">-->
<!--					<template v-if="item.type === 'image'">-->
<!--						<el-image-->
<!--							:style="{ width: `${item.width}px`, height: `${item.height}px` }"-->
<!--							:src="scope.row[item.key]"-->
<!--							:zoom-rate="1.2"-->
<!--							:preview-src-list="[scope.row[item.key]]"-->
<!--							preview-teleported-->
<!--							fit="cover"-->
<!--						/>-->
<!--					</template>-->
<!--					<template v-else>-->
<!--						{{ scope.row[item.key] }}-->
<!--					</template>-->
<!--				</template>-->
<!--			</el-table-column>-->
<!--			<el-table-column label="操作" width="100" v-if="config.isOperate">-->
<!--				<template v-slot="scope">-->
<!--					<el-popconfirm title="确定删除吗？" @confirm="onDelRow(scope.row)">-->
<!--						<template #reference>-->
<!--							<el-button text type="primary">删除</el-button>-->
<!--						</template>-->
<!--					</el-popconfirm>-->
<!--				</template>-->
<!--			</el-table-column>-->
<!--			<template #empty>-->
<!--				<el-empty description="暂无数据" />-->
<!--			</template>-->
<!--		</el-table>-->
<!--		<div class="table-footer mt15">-->
<!--			<el-pagination-->
<!--				v-model:current-page="state.page.pageNum"-->
<!--				v-model:page-size="state.page.pageSize"-->
<!--				:pager-count="5"-->
<!--				:page-sizes="[10, 20, 30]"-->
<!--				:total="config.total"-->
<!--				layout="total, sizes, prev, pager, next, jumper"-->
<!--				background-->
<!--				@size-change="onHandleSizeChange"-->
<!--				@current-change="onHandleCurrentChange"-->
<!--			>-->
<!--			</el-pagination>-->
<!--			<div class="table-footer-tool">-->
<!--				<SvgIcon name="iconfont icon-dayin" :size="19" title="打印" @click="onPrintTable" />-->
<!--				<SvgIcon name="iconfont icon-yunxiazai_o" :size="22" title="导出" @click="onImportTable" />-->
<!--				<SvgIcon name="iconfont icon-shuaxin" :size="22" title="刷新" @click="onRefreshTable" />-->
<!--				<el-popover-->
<!--					placement="top-end"-->
<!--					trigger="click"-->
<!--					transition="el-zoom-in-top"-->
<!--					popper-class="table-tool-popper"-->
<!--					:width="300"-->
<!--					:persistent="false"-->
<!--					@show="onSetTable"-->
<!--				>-->
<!--					<template #reference>-->
<!--						<SvgIcon name="iconfont icon-quanjushezhi_o" :size="22" title="设置" />-->
<!--					</template>-->
<!--					<template #default>-->
<!--						<div class="tool-box">-->
<!--							<el-tooltip content="拖动进行排序" placement="top-start">-->
<!--								<SvgIcon name="fa fa-question-circle-o" :size="17" class="ml11" color="#909399" />-->
<!--							</el-tooltip>-->
<!--							<el-checkbox-->
<!--								v-model="state.checkListAll"-->
<!--								:indeterminate="state.checkListIndeterminate"-->
<!--								class="ml10 mr1"-->
<!--								label="列显示"-->
<!--								@change="onCheckAllChange"-->
<!--							/>-->
<!--							<el-checkbox v-model="getConfig.isSerialNo" class="ml12 mr1" label="序号" />-->
<!--							<el-checkbox v-model="getConfig.isSelection" class="ml12 mr1" label="多选" />-->
<!--						</div>-->
<!--						<el-scrollbar>-->
<!--							<div ref="toolSetRef" class="tool-sortable">-->
<!--								<div class="tool-sortable-item" v-for="v in header" :key="v.key" :data-key="v.key">-->
<!--									<i class="fa fa-arrows-alt handle cursor-pointer"></i>-->
<!--									<el-checkbox v-model="v.isCheck" size="default" class="ml12 mr8" :label="v.title" @change="onCheckChange" />-->
<!--								</div>-->
<!--							</div>-->
<!--						</el-scrollbar>-->
<!--					</template>-->
<!--				</el-popover>-->
<!--			</div>-->
<!--		</div>-->
<!--	</div>-->
</template>

<script setup lang="ts" name="netxTable">
// import { reactive, computed, nextTick, ref } from 'vue';
// import { ElMessage } from 'element-plus';
// import printJs from 'print-js';
// import table2excel from 'js-table2excel';
// import Sortable from 'sortablejs';
// import { storeToRefs } from 'pinia';
// import { useThemeConfig } from '/@/stores/themeConfig';
// import '/@/theme/tableTool.scss';

// 定义父组件传过来的值
// const props = defineProps({
// 	// 列表内容
// 	data: {
// 		type: Array<EmptyObjectType>,
// 		default: () => [],
// 	},
// 	// 表头内容
// 	header: {
// 		type: Array<EmptyObjectType>,
// 		default: () => [],
// 	},
// 	// 配置项
// 	config: {
// 		type: Object,
// 		default: () => {},
// 	},
// 	// 打印标题
// 	printName: {
// 		type: String,
// 		default: () => '',
// 	},
// });
//
// // 定义子组件向父组件传值/事件
// const emit = defineEmits(['delRow', 'pageChange', 'sortHeader']);
//
// // 定义变量内容
// const toolSetRef = ref();
// const storesThemeConfig = useThemeConfig();
// const { themeConfig } = storeToRefs(storesThemeConfig);
// const state = reactive({
// 	page: {
// 		pageNum: 1,
// 		pageSize: 10,
// 	},
// 	selectlist: [] as EmptyObjectType[],
// 	checkListAll: true,
// 	checkListIndeterminate: false,
// });
//
// // 设置边框显示/隐藏
// const setBorder = computed(() => {
// 	return props.config.isBorder ? true : false;
// });
// // 获取父组件 配置项（必传）
// const getConfig = computed(() => {
// 	return props.config;
// });
// // 设置 tool header 数据
// const setHeader = computed(() => {
// 	return props.header.filter((v) => v.isCheck);
// });
// // tool 列显示全选改变时
// const onCheckAllChange = <T>(val: T) => {
// 	if (val) props.header.forEach((v) => (v.isCheck = true));
// 	else props.header.forEach((v) => (v.isCheck = false));
// 	state.checkListIndeterminate = false;
// };
// // tool 列显示当前项改变时
// const onCheckChange = () => {
// 	const headers = props.header.filter((v) => v.isCheck).length;
// 	state.checkListAll = headers === props.header.length;
// 	state.checkListIndeterminate = headers > 0 && headers < props.header.length;
// };
// // 表格多选改变时，用于导出
// const onSelectionChange = (val: EmptyObjectType[]) => {
// 	state.selectlist = val;
// };
// // 删除当前项
// const onDelRow = (row: EmptyObjectType) => {
// 	emit('delRow', row);
// };
// // 分页改变
// const onHandleSizeChange = (val: number) => {
// 	state.page.pageSize = val;
// 	emit('pageChange', state.page);
// };
// // 分页改变
// const onHandleCurrentChange = (val: number) => {
// 	state.page.pageNum = val;
// 	emit('pageChange', state.page);
// };
// // 搜索时，分页还原成默认
// const pageReset = () => {
// 	state.page.pageNum = 1;
// 	state.page.pageSize = 10;
// 	emit('pageChange', state.page);
// };
// // 打印
// const onPrintTable = () => {
// 	// https://printjs.crabbly.com/#documentation
// 	// 自定义打印
// 	let tableTh = '';
// 	let tableTrTd = '';
// 	let tableTd: any = {};
// 	// 表头
// 	props.header.forEach((v) => {
// 		tableTh += `<th class="table-th">${v.title}</th>`;
// 	});
// 	// 表格内容
// 	props.data.forEach((val, key) => {
// 		if (!tableTd[key]) tableTd[key] = [];
// 		props.header.forEach((v) => {
// 			if (v.type === 'text') {
// 				tableTd[key].push(`<td class="table-th table-center">${val[v.key]}</td>`);
// 			} else if (v.type === 'image') {
// 				tableTd[key].push(`<td class="table-th table-center"><img src="${val[v.key]}" style="width:${v.width}px;height:${v.height}px;"/></td>`);
// 			}
// 		});
// 		tableTrTd += `<tr>${tableTd[key].join('')}</tr>`;
// 	});
// 	// 打印
// 	printJs({
// 		printable: `<div style=display:flex;flex-direction:column;text-align:center><h3>${props.printName}</h3></div><table border=1 cellspacing=0><tr>${tableTh}${tableTrTd}</table>`,
// 		type: 'raw-html',
// 		css: ['//at.alicdn.com/t/c/font_2298093_rnp72ifj3ba.css', '//unpkg.com/element-plus/dist/index.css'],
// 		style: `@media print{.mb15{margin-bottom:15px;}.el-button--small i.iconfont{font-size: 12px !important;margin-right: 5px;}}; .table-th{word-break: break-all;white-space: pre-wrap;}.table-center{text-align: center;}`,
// 	});
// };
// // 导出
// const onImportTable = () => {
// 	if (state.selectlist.length <= 0) return ElMessage.warning('请先选择要导出的数据');
// 	table2excel(props.header, state.selectlist, `${themeConfig.value.globalTitle} ${new Date().toLocaleString()}`);
// };
// // 刷新
// const onRefreshTable = () => {
// 	emit('pageChange', state.page);
// };
// // 设置
// const onSetTable = () => {
// 	nextTick(() => {
// 		const sortable = Sortable.create(toolSetRef.value, {
// 			handle: '.handle',
// 			dataIdAttr: 'data-key',
// 			animation: 150,
// 			onEnd: () => {
// 				const headerList: EmptyObjectType[] = [];
// 				sortable.toArray().forEach((val: string) => {
// 					props.header.forEach((v) => {
// 						if (v.key === val) headerList.push({ ...v });
// 					});
// 				});
// 				emit('sortHeader', headerList);
// 			},
// 		});
// 	});
// };
//
// // 暴露变量
// defineExpose({
// 	pageReset,
// });
</script>

<style scoped lang="scss">
.table-container {
	display: flex;
	flex-direction: column;
	.el-table {
		flex: 1;
	}
	.table-footer {
		display: flex;
		.table-footer-tool {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			i {
				margin-right: 10px;
				cursor: pointer;
				color: var(--el-text-color-regular);
				&:last-of-type {
					margin-right: 0;
				}
			}
		}
	}
}
</style>
